<template>
	<view>
		<view class="box">
			<view class="title">
				反馈内容
			</view>
			<textarea class="text" v-model="title" placeholder="请输入反馈内容" maxlength="-1" />

			<view class="title">
				上传图片
			</view>
			<view class="example-body">
				<uni-file-picker v-model="imageValue" title="最多选择9张图片" file-mediatype="image" mode="grid" :limit="9"
					:auto-upload="false" @select="select" @delete="isdelete" />
			</view>
		</view>
		<view class="but">
			<view class="butnr" @click="upload">
				确定提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageValue: [],
				uimg: [],
				title: ''
			}
		},
		methods: {
			upload() {
				let that = this
				if (!that.title) return uni.showToast({
					title: '请输入反馈内容',
					icon: 'none',
					duration: 2000
				});
				if (that.uimg.length <= 0) return uni.showToast({
					title: '请上传图片',
					icon: 'none',
					duration: 2000
				});
				Promise.all(
					that.uimg.map(item => {
						return new Promise((resolve, reject) => {
							that.$upload(item).then(res => {
								// console.log('res', res);
								resolve(res.file_path)
							})
						})
					})
				).then((photo) => {
					console.log("photo:", photo);
					console.log('阿萨德', that.$uid);
					that.$post('index/fankui', {
						uid: that.$uid,
						photo: photo,
						title: that.title
					}).then(res => {
						console.log(res);
						uni.showToast({
							title: '反馈成功',
							duration: 2000
						});
						setTimeout(function() {
							uni.navigateBack();
						}, 1000);
					})
				})
			},
			isdelete(e) {
				let deleteIndex = this.uimg.findIndex(item => item === e.tempFilePath);
				this.uimg.splice(deleteIndex, 1);
			},
			// 获取上传状态
			select(e) {
				this.uimg.push(...e.tempFilePaths)
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f4f4f4;
	}

	.box {
		padding: 40rpx 30rpx;

		.title {
			padding-left: 10rpx;
			font-size: 30rpx;
			font-family: Microsoft YaHei, Microsoft YaHei-Bold;
			font-weight: 700;
			text-align: left;
			color: #222222;
			margin-bottom: 39rpx;
		}

		.text {
			width: 640rpx;
			min-height: 460rpx;
			background: #ffffff;
			border-radius: 6rpx;
			padding: 33rpx 25rpx;
			box-shadow: -2rpx 0rpx 10rpx 2rpx rgba(158, 158, 158, 0.10);
			margin-bottom: 40rpx;
		}

		/deep/.file-picker__box-content {
			background-color: #ffffff;
		}

		/deep/.is-add {
			background-color: #ffffff;
		}
	}

	.but {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		background: #ffffff;
		padding: 10rpx 0;

		.butnr {
			margin: 0 auto;
			width: 690rpx;
			height: 80rpx;
			background: linear-gradient(0deg, #004cce 0%, #046eca 100%), #fb3530;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-family: Microsoft YaHei, Microsoft YaHei-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			line-height: 80rpx;
		}

	}
</style>